<template>
  <div class="wrap">
    <div class="moudle-title">气 象 信 息</div>
    <div class="meteoro">
      <div class="location"></div>
      <div class="info">
        <div class="time">{{time}}</div>
        <div class="unknown">xxxxx.xxxxxx</div>
      </div>
    </div>
    <div class="mete-list">
      <div class="mete-item1 mete-item">
        <div>35℃</div>
        <div>温度</div>
      </div>
      <div class="mete-item2 mete-item">
        <div>80%rh</div>
        <div>湿度</div>
      </div>
      <div class="mete-item3 mete-item">
        <div>101KPa</div>
        <div>大气压</div>
      </div>
    </div>
    <div class="mete-list"  style="  margin-top: -15px;">
      <div class="mete-item4 mete-item">
        <div>东北风</div>
        <div>风向</div>
      </div>
      <div class="mete-item5 mete-item">
        <div>1.6m/s</div>
        <div>风速</div>
      </div>
      <div class="mete-item6 mete-item">
        <div>1-2级</div>
        <div>风力</div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { onMounted, reactive, ref, toRefs, onUnmounted } from 'vue'

//   import { useRouter } from 'vue-router'
export default {
  name: 'leftTop',
  setup() {
    const multipleTable = ref(null)
    //   const router = useRouter()
    const state = reactive({
      timeInter: null,
      time: '',
    })
    onMounted(() => {
      state.timeInter = setInterval(function () {
        var date = new Date()
        var year = date.getFullYear() //  返回的是年份
        var month = date.getMonth() + 1 //  返回的月份上个月的月份，记得+1才是当月
        var dates = date.getDate() //  返回的是几号
        var h = date.getHours()
        var m = date.getMinutes()
        var s = date.getSeconds()
        if (String(s).length == 1) {
          s = '0' + s
        }
        state.time =
          year + '-' + month + '-' + dates + ' ' + h + ':' + m + ':' + s
      }, 1000)
    })

    //   const handleAdd = () => {
    //     router.push({ path: '/add' })
    //   }
    //   const handleEdit = (id) => {
    //     router.push({ path: '/add', query: { id } })
    //   }

    return {
      ...toRefs(state),
      multipleTable,
    }
  },
  beforeUnmount() {
    clearInterval(this.timeInter)
    this.timeInter = null
  },
}
</script>
  
<style scoped lang='scss'>
.wrap {
  padding: 10px 0 0 0;
}
.moudle-title {
  color: #50e9ff;
  font-size: 16px;
  text-align: center;
}
.meteoro {
  display: flex;
  justify-content: flex-start;
  color: #147dcf;
  padding: 10px 40px 0 40px;
  font-size: 14px;
  .location {
    width: 60px;
    height: 40px;
    margin: 0 30px 0 0;
    background-image: url('../../../assets/images/u121.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .unknown {
    margin-top: 14px;
  }
}
.mete-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #147dcf;
  padding: 0 40px 0 20px;
  font-size: 14px;

  .mete-item {
    width: 96px;
    height: 96px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../../../assets/images/u103.png');
    color: #147dcf;
    padding-top: 35px;
    padding-left: 10px;
    text-align: center;
  }
  .mete-item:nth-child(2) {
    margin: 0 40px;
  }
  .mete-item1 {
    background-image: url('../../../assets/images/u101.png');
    text-align: center;
    color: #e0bf03;
    padding-top: 35px;
    padding-left: 10px;
  }
  .mete-item2 {
    background-image: url('../../../assets/images/u105.png');
    color: #c62824;
    padding-top: 35px;
    padding-left: 10px;
    text-align: center;
  }
}
</style>